<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏扩展卡片</title>
    <link href="./style.css" rel='stylesheet'>

</head>
<body>
    <a >Button</a>
    <a >Button</a>
</body>
<script>
    const buttons = document.querySelectorAll('a');
    buttons.forEach(btn => {
        btn.addEventListener('click', function(e){
            let x = e.clientX - e.target.offsetLeft
            let y = e.clientY - e.target.offsetTop
            console.log(this)
            let ripples = document.createElement('span')
            ripples.style.left = x + 'px'
            ripples.style.top = y + 'px'
            this.appendChild(ripples)
            setTimeout(()=>{
                ripples.remove()
            },750)
        })
    })
</script>
</html>